<div>

    <h2 translate="onlineExamSystemApp.system.home.title">User</h2>

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#saveUserModal" ng-click="clear()">
        <span class="glyphicon glyphicon-flash"></span> <span translate="onlineExamSystemApp.system.home.createLabel">Create a new User</span>
    </button>
    <div class="modal fade" id="saveUserModal" tabindex="-1" role="dialog" aria-labelledby="myUserLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="saveForm" class="form-horizontal" role="form" ng-submit="create()" show-validation>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">&times;</button>
                        <h4 class="modal-title" id="myUserLabel" translate="onlineExamSystemApp.system.home.createLabel">Create a User</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label" translate="onlineExamSystemApp.system.role">Role</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                  <input type="radio" name="role" id="role" ng-model="user.roles" value="ROLE_ADMIN" checked="checked">
                                  <span translate="onlineExamSystemApp.system.admin"></span>
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="role" id="role" ng-model="user.roles" value="ROLE_TEACHER">
                                  <span translate="onlineExamSystemApp.system.teacher"></span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.id">ID</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{{user.id}}" name="id" ng-model="user.id" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.user_id">ID</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{{user.userNo}}" name="userNo" ng-model="user.userNo" required>
                            </div>
                            <div ng-show="saveForm.userNo.$invalid"></div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.username">Username</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{{user.login}}" name="login" ng-model="user.login" required>
                            </div>
                            <div ng-show="saveForm.login.$invalid"></div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.email">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" value="{{user.email}}" name="email" ng-model="user.email" required>
                            </div>
                            <div ng-show="saveForm.email.$invalid"></div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
                            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span translate="entity.action.cancel">Cancel</span>
                        </button>
                        <button type="submit" ng-disabled="saveForm.$invalid" class="btn btn-primary">
                            <span class="glyphicon glyphicon-save"></span>&nbsp;<span translate="entity.action.save">Save</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="saveUserTipsModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="deleteForm">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                ng-click="clear()">&times;</button>
                        <h4 class="modal-title" translate="onlineExamSystemApp.system.add.title">Create User tips</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-success" ng-show="showTips === 'success'">
                            <span class="text-center" translate="onlineExamSystemApp.system.add.success"></span>
                        </div>
                        <div class="alert alert-danger" ng-show="showTips === 'failed'">
                            <span class="text-center" translate="onlineExamSystemApp.system.add.failed"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
                            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span translate="entity.action.cancel">Cancel</span>
                        </button>
                        <button type="button" ng-if="showTips === 'success'" class="btn btn-info" data-dismiss="modal" ng-click="showAdd()">
                            <span class="glyphicon glyphicon-ban-save"></span>&nbsp;<span translate="entity.action.readd">Add Other</span>
                        </button>
                        <button type="button" ng-if="showTips === 'failed'" class="btn btn-info" data-dismiss="modal" ng-click="showAdd()">
                            <span class="glyphicon glyphicon-ban-save"></span>&nbsp;<span translate="entity.action.reset">Try Again</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit user information model -->
    <div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="myUserLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="editForm" class="form-horizontal" role="form" ng-submit="confirmUpdate()" show-validation>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">&times;</button>
                        <h4 class="modal-title" id="myUserLabel" translate="onlineExamSystemApp.system.home.editLabel">edit a User</h4>
                    </div>
                    <div class="modal-body">
                        <!-- <div class="form-group">
                            <label for="" class="col-sm-2 control-label" translate="onlineExamSystemApp.system.role">Role</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                  <input type="radio" name="role" id="role" ng-model="user.roles"
                                    value="ROLE_ADMIN" checked="checked" required>
                                  <span translate="onlineExamSystemApp.system.admin"></span>
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="role" id="role" ng-model="user.roles"
                                    value="ROLE_TEACHER" required>
                                  <span translate="onlineExamSystemApp.system.teacher"></span>
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="role" id="role" ng-model="user.roles"
                                    value="ROLE_STUDENT" required>
                                  <span translate="onlineExamSystemApp.system.student"></span>
                                </label>
                            </div>
                        </div> -->

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.id">ID</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{{user.id}}" name="id" ng-model="user.id" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.user_id">ID</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{{user.userNo}}" name="userNo" ng-model="user.userNo" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.username">Username</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{{user.login}}" name="login" ng-model="user.login" readonly>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.email">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" value="{{user.email}}" name="email" ng-model="user.email" required>
                            </div>
                            <div ng-show="editForm.email.$invalid"></div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.classes">Classes</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{{user.classes}}" name="classes" ng-model="user.classes">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.phone">Phone</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" value="{{user.phone}}" name="phone" ng-model="user.phone">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.first_name">firstName</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" value="{{user.firstName}}" name="firstName" ng-model="user.firstName">
                            </div>
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.last_name">lastName</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" value="{{user.lastName}}" name="lastName" ng-model="user.lastName">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label" translate="onlineExamSystemApp.system.gender">Gender</label>
                            <div class="col-sm-4">
                                <label class="radio-inline">
                                  <input type="radio" name="gender" id="gender" ng-model="user.gender" value="0" checked="checked">
                                  <span translate="onlineExamSystemApp.system.male">Male</span>
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="gender" id="gender" ng-model="user.gender" value="1">
                                  <span translate="onlineExamSystemApp.system.female">Female</span>
                                </label>
                                <label class="radio-inline">
                                  <input type="radio" name="gender" id="gender" ng-model="user.gender" value="2">
                                  <span translate="onlineExamSystemApp.system.unknow">Unknow</span>
                                </label>
                            </div>
                            <label class="col-sm-2 control-label" translate="onlineExamSystemApp.system.age">Age</label>
                            <div class="col-sm-4">
                                <input type="number" class="form-control" value="{{user.age}}" name="age" ng-model="user.age">
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span translate="entity.action.cancel">Cancel</span>
                        </button>
                        <button type="submit" ng-disabled="editForm.$invalid" class="btn btn-primary">
                            <span class="glyphicon glyphicon-save"></span>&nbsp;<span translate="entity.action.save">Save</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editUserTipsModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="deleteForm">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                ng-click="clear()">&times;</button>
                        <h4 class="modal-title" translate="onlineExamSystemApp.system.edit.title">Create User tips</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-success" ng-show="editTips === 'success'">
                            <span class="text-center" translate="onlineExamSystemApp.system.edit.success"></span>
                        </div>
                        <div class="alert alert-danger" ng-show="editTips === 'failed'">
                            <span class="text-center" translate="onlineExamSystemApp.system.edit.failed"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
                            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span translate="entity.action.cancel">Cancel</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteUserConfirmation">
        <div class="modal-dialog">
            <div class="modal-content">
                <form name="deleteForm" ng-submit="confirmDelete(user.id)">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                                ng-click="clear()">&times;</button>
                        <h4 class="modal-title" translate="entity.delete.title">Confirm delete operation</h4>
                    </div>
                    <div class="modal-body">
                        <span translate="onlineExamSystemApp.system.delete.question" >Are you sure you want to delete this User</span>
                        <a ui-sref="userDetail({login:user.login})" >
                            {{user.login}}&nbsp;
                        </a>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
                            <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span translate="entity.action.cancel">Cancel</span>
                        </button>
                        <button type="submit" ng-disabled="deleteForm.$invalid" class="btn btn-danger">
                            <span class="glyphicon glyphicon-remove-circle"></span>&nbsp;<span translate="entity.action.delete">Delete</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th translate="onlineExamSystemApp.system.user_id">User ID</th>
                    <th translate="onlineExamSystemApp.system.username">Username</th>
                    <th translate="onlineExamSystemApp.system.phone">Phone</th>
                    <th translate="onlineExamSystemApp.system.classes">Class</th>
                    <th translate="onlineExamSystemApp.system.email">Email</th>
                    <th translate="onlineExamSystemApp.system.create_time">Create Time</th>
                    <th translate="onlineExamSystemApp.system.options">Options</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in users">
                    <td><a ui-sref="userDetail({login:user.login})">{{user.userNo}}</a></td>
                    <td>{{user.login}}</td>
                    <td>{{user.phone}}</td>
                    <td>{{user.classes}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.createdDate | date}}</td>


                    <td>
                        <button type="submit"
                                ui-sref="userDetail({login:user.login})"
                                class="btn btn-info btn-sm">
                            <span class="glyphicon glyphicon-eye-open"></span>&nbsp;<span translate="entity.action.view"> View</span>
                        </button>
                        <button type="submit"
                                ng-click="update({login:user.login})"
                                class="btn btn-primary btn-sm">
                            <span class="glyphicon glyphicon-pencil"></span>&nbsp;<span translate="entity.action.edit"> Edit</span>
                        </button>
                        <button type="submit"
                                ng-click="delete({login:user.login})"
                                class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-remove-circle"></span>&nbsp;<span translate="entity.action.delete"> Delete</span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <nav>
            <ul class="pager">
                <li ng-show="links['first']" ng-click="loadPage(links['first'])"><a href="#">&lt;&lt;</a></li>
                <li ng-show="links['prev']" ng-click="loadPage(links['prev'])"><a href="#">&lt;</a></li>
                <li ng-show="links['next']" ng-click="loadPage(links['next'])"><a href="#">&gt;</a></li>
                <li ng-show="links['last']" ng-click="loadPage(links['last'])"><a href="#">&gt;&gt;</a></li>
            </ul>
        </nav>
    </div>
</div>
